<!--商品类别搜索组件 -->
<template>
    <el-select v-model="itemCateForm.name" filterable remote :remote-method="loadSearchData" placeholder="请选择类别" @change="handlerSelect" clearable>
        <el-option v-for="item in searchList" :key="item.name" :label="item.name" :value="item.name">
        </el-option>
    </el-select>
</template>

<script>
import gooItemCateApi from '../../api/gooItemCateApi.js'
export default {
    data() {
        return {
            itemCateForm: {
                id: null,
                name: null
            },
            searchList: []
        }
    },
    props: {
        selectedCateId: Number
    },

    mounted: function() {
        console.log(this.selectedCateId)
        this.matchSelect(this.selectedCateId)
    },
    methods: {
        //加载搜索框数据
        loadSearchData(keywords) {
            gooItemCateApi.search(keywords).then((res) => {
                if (res.status == 200 && res.data != '') {
                    this.searchList = res.data;
                }
            })
        },
        // 下拉框选择
        handlerSelect(name) {
            if (name) {
                this.getSelectCateId(name)
            }
        },
        getSelectCateId(name) {
            let cates = this.searchList;
            for (var i = 0, len = cates.length; i < len; i++) {
                var cate = cates[i];
                if (name == cate.name) {
                    this.itemCateForm.id = cate.id;
                    this.$emit('cate-search-object', this.itemCateForm)
                }
            }
        },
        //匹配下拉选择
        matchSelect(cateId) {
            console.log('匹配类别下拉框：' + cateId)
            if (cateId) {
                gooItemCateApi.search(null).then((res) => {
                    if (res.status == 200 && res.data != '') {
                        this.searchList = res.data;
                        var cates = this.searchList;
                        for (var i = 0, len = cates.length; i < len; i++) {
                            if (cates[i].id == cateId) {
                                this.itemCateForm = cates[i];
                            }
                        }
                    }
                })

            }
        }

    }
}
</script>
